<template>
  <!-- 下载第三方插件   vue-draggable    Sortable.js -->

  <div>
    <div>第三方插件： {{ drag ? '拖拽中' : '拖拽停止' }}</div>
    <!--使用draggable组件-->
    <draggable
      v-model="myArray"
      chosenClass="chosen"
      forceFallback="true"
      group="people"
      animation="1000"
      @start="onStart"
      @end="onEnd"
    >
      <transition-group>
        <div class="item" v-for="element in myArray" :key="element.id">{{ element.name }}</div>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
  name: 'draggableView',
  //注册draggable组件
  components: {
    draggable,
  },
  data() {
    return {
      drag: false,
      //定义要被拖拽对象的数组
      myArray: [
        { people: 'cn', id: 1, name: 'www.itxst.com' },
        { people: 'cn', id: 2, name: 'www.baidu.com' },
        { people: 'cn', id: 3, name: 'www.taobao.com' },
        { people: 'us', id: 4, name: 'www.google.com' },
      ],
    }
  },
  methods: {
    //开始拖拽事件
    onStart() {
      this.drag = true
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false
    },
  },
}
</script>

<style lang="scss" scoped>
/*被拖拽对象的样式*/
.item {
  width: 300px;
  padding: 6px;
  background-color: skyblue;
  border: solid 1px #eee;
  margin-bottom: 10px;
  color: #666;
  cursor: move;
  user-select: none;
}
/*选中样式*/
.chosen {
  border: solid 2px skyblue !important;
}
</style>
